<template>
  <div class="alerts-panel">
    <div class="panel-header">
      <div class="panel-title">异常数据告警</div>
      <div class="panel-actions">
        <el-button size="small">全部告警</el-button>
        <el-button size="small">仅未处理</el-button>
      </div>
    </div>
    <div class="alert-list">
      <div class="alert-item critical">
        <div class="alert-icon">
          <i class="fas fa-exclamation-circle fa-lg"></i>
        </div>
        <div class="alert-content">
          <div class="alert-title">数据源断开连接</div>
          <div class="alert-desc">雷达设备 RDR-0247 在 14:23:45 断开连接，持续 15 分钟</div>
          <div class="alert-time">2023-10-15 14:23:45</div>
        </div>
      </div>

      <div class="alert-item warning">
        <div class="alert-icon">
          <i class="fas fa-exclamation-triangle fa-lg"></i>
        </div>
        <div class="alert-content">
          <div class="alert-title">数据格式错误</div>
          <div class="alert-desc">通信设备 COM-1123 上传数据格式异常，字段缺失</div>
          <div class="alert-time">2023-10-15 13:45:22</div>
        </div>
      </div>

      <div class="alert-item info">
        <div class="alert-icon">
          <i class="fas fa-info-circle fa-lg"></i>
        </div>
        <div class="alert-content">
          <div class="alert-title">数据延迟警告</div>
          <div class="alert-desc">雷达设备 RDR-1892 数据延迟超过阈值 120ms</div>
          <div class="alert-time">2023-10-15 12:30:18</div>
        </div>
      </div>

      <div class="alert-item critical">
        <div class="alert-icon">
          <i class="fas fa-exclamation-circle fa-lg"></i>
        </div>
        <div class="alert-content">
          <div class="alert-title">通信中断</div>
          <div class="alert-desc">通信设备 COM-0876 在 11:15:33 中断，持续 8 分钟</div>
          <div class="alert-time">2023-10-15 11:15:33</div>
        </div>
      </div>

      <div class="alert-item warning">
        <div class="alert-icon">
          <i class="fas fa-exclamation-triangle fa-lg"></i>
        </div>
        <div class="alert-content">
          <div class="alert-title">数据校验失败</div>
          <div class="alert-desc">雷达设备 RDR-1567 上传数据校验失败，重复尝试中</div>
          <div class="alert-time">2023-10-15 10:22:09</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AlertPanel'
};
</script>

<style scoped>
.alerts-panel {
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid #2a3a6a;
}

.alert-list {
  margin-top: 15px;
}

.alert-item {
  display: flex;
  padding: 18px 15px;
  border-bottom: 1px solid #2a3a6a;
  transition: background 0.3s ease;
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-item:hover {
  background: rgba(30, 50, 90, 0.4);
}

.alert-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 15px;
  flex-shrink: 0;
}

.critical .alert-icon {
  background: rgba(255, 90, 90, 0.2);
  color: #ff5a5a;
}

.warning .alert-icon {
  background: rgba(255, 180, 0, 0.2);
  color: #ffb400;
}

.info .alert-icon {
  background: rgba(0, 150, 255, 0.2);
  color: #0096ff;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 16px;
}

.alert-desc {
  color: #8898b8;
  font-size: 14px;
  margin-bottom: 8px;
}

.alert-time {
  font-size: 12px;
  color: #6a7a9a;
}
</style>